<template>
    <div class="balanceBox" v-if="isLogin">
        <h1>
            {{ $t('views.index.login.balance.title') }}
        </h1>

        <div class="cashBox">
            <img src="@/assets/image/indexImage/bitcoin.png" alt="">
            <p>{{ balance }}</p>
            <!-- <span>{{ $t('views.index.login.balance.currency') }}</span> -->
        </div>
    </div>
    <div class="loginBox" v-else>
        <h1>
            {{ $t('views.index.login.title') }}
        </h1>

        <div class="fontBox">

            <div class="selectInput">
                <div class="selectBox" @mouseenter="selectShow = true" @mouseleave="selectShow = false">
                    <div class="select" v-show="selectShow">
                        <ul class="selectContent">
                            <li :class="{ 'selectItem': true, 'change': item.code == countryCode }"
                                v-for="(item, index) in interCodeList" @click="countryCode = item.code" :key="index">
                                <span>+</span>
                                <span>{{ item.code }}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="selectChangeBox">
                        <div class="changeText">
                            <span>+</span>
                            <span>{{ countryCode }}</span>
                        </div>
                        <i :class="{ 'icon': true, 'change': selectShow, 'el-icon-arrow-down': true }"></i>
                    </div>
                </div>

                <input class="loginName" type="text" :placeholder="$t('views.index.login.from.loginName.placeholder')"
                    v-model="userName" />
            </div>

            <input class="loginPassword" type="password"
                :placeholder="$t('views.index.login.from.loginPassword.placeholder')" v-model="userPassword" />
            <button @click="loginChange">{{ $t('views.index.login.from.button.title') }}</button>
        </div>
    </div>
</template>

<script>
import internationalCode from '@/config/internationalCode';
import {
    cipherLogin,
    getMemberInfo
} from '@/api/api';
export default {
    data() {
        return {
            countryCode: 86,
            userName: '',
            userPassword: '',
            balance: '0.00',
            interCodeList: [],
            selectShow: false,
        }
    },
    computed: {
        isLogin() {
            return this.$store.state.token ? true : false
        },
    },
    mounted() {
        this.interCodeList = internationalCode
        this.countryCode = internationalCode[0].code
        if (this.$store.state.token) {
            getMemberInfo().then(res => {
                if (res.code == 10000) {
                    this.$store.commit('setToken', { token: '' })
                    this.$router.go()
                    return false
                }
                if (res.code == 0) {
                    this.balance = res.data.mars_coin;
                } else {
                    alert(res.msg)
                }

            })
        }
    },
    methods: {
        loginChange() {
            const userNameValidate = /^\d{8,11}$/;
            if (!userNameValidate.test(this.userName)) {
                return alert(this.$t('views.index.login.tip.loginName.verification'))
            }
            const userPasswordValidate = /^.{8,20}$/;
            if (!userPasswordValidate.test(this.userPassword)) {
                return alert(this.$t('views.index.login.tip.loginPassword.verification'))
            }
            cipherLogin({ account: this.userName, password: this.userPassword, country_code: this.countryCode }).then(res => {
                if (res.code == 0) {
                    this.$store.commit('setToken', { token: res.data.token })
                    this.balance = res.data.mars_coin;
                    alert(this.$t('views.index.login.tip.signIn.success'))
                } else {
                    alert(res.msg)
                }
            })

        }
    }


}
</script>

<style lang="scss" scoped>
.loginBox {
    h1 {
        // font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 60px;
        color: #FFFFFF;
        line-height: 58px;
        margin-top: 164px;
    }

    .fontBox {
        margin-top: 54px;
        display: flex;
        flex-direction: column;

        .selectInput {
            width: 600px;
            height: 64px;
            border-radius: 4px;
            border: 1px solid #FFFFFF;
            display: flex;
            box-sizing: border-box;

            .selectBox {
                width: 135px;
                height: 100%;
                position: relative;

                .select {
                    width: 130px;
                    height: 190px;
                    position: absolute;
                    top: 100%;
                    right: 0;
                    background: #0E0E0E;
                    border-radius: 8px;
                    box-sizing: border-box;
                    padding: 20px 0;
                    z-index: 1;

                    .selectContent {
                        width: 100%;
                        height: 100%;
                        overflow: scroll;
                        list-style: none;
                        // font-family: Source Han Sans CN;
                        font-weight: bold;
                        font-size: 18px;
                        color: #FFFFFF;

                        .selectItem {
                            padding: 5px 35px;
                            box-sizing: border-box;

                            &.change {
                                background: #1E1E1E;
                            }

                            &:hover {
                                background: #1E1E1E;
                            }
                        }

                        &::-webkit-scrollbar {
                            display: none;
                        }
                    }
                }

                &::after {
                    content: '';
                    width: 1px;
                    height: 34px;
                    display: block;
                    background: #FFFFFF;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }

                .selectChangeBox {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    padding: 0 20px 0 36px;

                    .changeText {
                        // font-family: Source Han Sans CN;
                        font-weight: bold;
                        font-size: 18px;
                        color: #FFFFFF;
                    }

                    .icon {
                        font-size: 14px;
                        font-weight: bold;

                        &.change {
                            transform: rotateZ(180deg);
                        }
                    }
                }
            }

            .loginName {
                flex: 1;
                height: 100%;
                border: none;
                box-sizing: border-box;
                padding: 0 20px;
                outline: none;
                color: #FFFFFF;
                background: none;
                // font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 18px;

                &::placeholder {
                    color: #FFFFFF;
                    opacity: 0.3;
                }
            }
        }

        .loginPassword {
            width: 600px;
            height: 64px;
            border-radius: 4px;
            border: 1px solid #FFFFFF;
            box-sizing: border-box;
            padding: 0 20px;
            outline: none;
            color: #FFFFFF;
            background: none;
            // font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            margin-top: 24px;

            &::placeholder {
                color: #FFFFFF;
                opacity: 0.3;
            }
        }

        button {
            width: 600px;
            height: 64px;
            margin-top: 62px;
            background: #FFFFFF;
            border-radius: 4px;
            border: none;
            // font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
        }
    }
}

.balanceBox {
    h1 {
        // font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 30px;
        margin-top: 242px;
    }

    .cashBox {
        display: flex;
        align-items: end;
        color: #FFFFFF;
        margin-top: 58px;

        img {
            width: 85px;
            height: 85px;
            display: inline-block;
        }

        p {
            // font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 90px;
            line-height: 88px;
            margin-left: 34px;
            margin-right: 28px;
        }

        span {
            // font-family: Alimama ShuHeiTi;
            font-weight: bold;
            font-size: 36px;
            line-height: 32px;
        }
    }
}
</style>

<style lang="scss"></style>
